{extend name="public/pure"}
{block name="style"}
<title>在线商城</title>
<link rel="stylesheet" href="/home/css/commodity/search.css">

{/block}
{block name="body"}

<div class="search clearfix">
    <div class="fl searchTxt">
        <input type="text" placeholder="请输入商品关键字">
        <i></i>
    </div>
    <div class="fr"><a href="javascript:history.back(-1)">取消</a></div>
</div>

<div class="lists">

</div>

{/block}
{block name="script"}
<script src="/home/js/reset.js"></script>
<script>

    $(".searchTxt input").on("input", function () {
        search();

    });

    function search() {
        var val = $(".searchTxt input").val();
        if (val != 0) {
            $("body").addClass("active");

            // 清空输入内容
            $("body.active .search .searchTxt i").on("click", function () {
                $("body").removeClass("active");
                $(".searchTxt input").val("");
                $(".lists .result").remove();
            });

            var html = '';
            $.ajax({
                type:"post",
                url: "{:Url('Commodity/search')}",
                data:{
                    val:val
                },
                beforeSend: function(XMLHttpRequest){},
                success:function(data){
                    console.log(data.length);
                    if(data.length == 0){
                        html +=
                                '<div class="result limit">无搜索结果</div>'
                    }else {
                        for(var i = 0; i < data.length; i++){
                            html+= '<a href=\"/home/commodity/detail?id='+data[i].id+'\" class="result limit">'+data[i].title+'</a>';
                        }
                    }
                    $('.lists' ).html(html);

                }

            });

        }else {
            $("body").removeClass("active");
            $(".lists .result").remove();
        }
    }
    search();


</script>
{/block}